<template>
  <div class="purchased">
    <van-nav-bar title="已购" />
    <div class="purchased-content">
      <div class="purchased-stats">
        <div class="stat-item">
          <div class="stat-number">{{ purchasedSongs.length }}</div>
          <div class="stat-label">已购歌曲</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ purchasedAlbums.length }}</div>
          <div class="stat-label">已购专辑</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ totalSpent }}</div>
          <div class="stat-label">总消费</div>
        </div>
      </div>
      
      <div class="section-title">已购歌曲</div>
      <div class="song-list">
        <div class="song-item" v-for="song in purchasedSongs" :key="song.id">
          <img :src="song.cover" class="song-cover" />
          <div class="song-info">
            <div class="song-title">{{ song.title }}</div>
            <div class="song-artist">{{ song.artist }}</div>
            <div class="song-price">¥{{ song.price }}</div>
          </div>
          <van-icon name="down" class="download-icon" />
        </div>
      </div>
      
      <div class="section-title">已购专辑</div>
      <div class="album-grid">
        <div class="album-item" v-for="album in purchasedAlbums" :key="album.id">
          <img :src="album.cover" class="album-cover" />
          <div class="album-name">{{ album.name }}</div>
          <div class="album-artist">{{ album.artist }}</div>
          <div class="album-price">¥{{ album.price }}</div>
        </div>
      </div>
      
      <van-button type="primary" round icon="shopping-cart" class="shop-btn">去购买更多</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const purchasedSongs = ref([
  { id: 1, title: '晴天', artist: '周杰伦', cover: 'https://img2.baidu.com/it/u=168590827,1280265529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', price: 2.00 },
  { id: 2, title: '稻香', artist: '周杰伦', cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', price: 2.00 },
  { id: 3, title: '青花瓷', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg', price: 2.00 },
  { id: 4, title: '七里香', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg', price: 2.00 },
  { id: 5, title: '夜曲', artist: '周杰伦', cover: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800', price: 2.00 },
  { id: 6, title: '发如雪', artist: '周杰伦', cover: 'https://img0.baidu.com/it/u=3315620404,701141190&fm=253&app=138&f=JPEG?w=834&h=800', price: 2.00 }
])

const purchasedAlbums = ref([
  { id: 1, name: '叶惠美', artist: '周杰伦', cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F12%2F20200412210551_fcknj.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1754442342&t=a2d87289180fc88f9055589a66b39041', price: 20.00 },
  { id: 2, name: '魔杰座', artist: '周杰伦', cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', price: 25.00 },
  { id: 3, name: '我很忙', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg', price: 22.00 },
  { id: 4, name: '七里香', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg', price: 18.00 },
  { id: 5, name: '11月的萧邦', artist: '周杰伦', cover: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800', price: 24.00 },
  { id: 6, name: '依然范特西', artist: '周杰伦', cover: 'https://img0.baidu.com/it/u=377267631,2990999101&fm=253&app=138&f=JPEG?w=760&h=760', price: 26.00 }
])

const totalSpent = computed(() => {
  const songsTotal = purchasedSongs.value.reduce((sum, song) => sum + song.price, 0)
  const albumsTotal = purchasedAlbums.value.reduce((sum, album) => sum + album.price, 0)
  return (songsTotal + albumsTotal).toFixed(2)
})
</script>

<style scoped>
.purchased {
  min-height: 100vh;
  background: var(--van-background-color, #fff);
  color: var(--van-text-color, #222);
}
.purchased-content {
  padding: 16px;
}
.purchased-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 24px;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 12px;
}
.stat-item {
  text-align: center;
}
.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #f56c6c;
}
.stat-label {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}
.section-title {
  font-weight: bold;
  margin: 18px 0 8px 0;
  font-size: 15px;
}
.song-list {
  margin-bottom: 24px;
}
.song-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.song-cover {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-right: 12px;
}
.song-info {
  flex: 1;
}
.song-title {
  font-weight: bold;
  font-size: 14px;
}
.song-artist {
  color: #888;
  font-size: 12px;
  margin-top: 2px;
}
.song-price {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 2px;
}
.download-icon {
  color: #f56c6c;
  font-size: 20px;
}
.album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.album-item {
  text-align: center;
}
.album-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  margin-bottom: 8px;
}
.album-name {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 2px;
}
.album-artist {
  color: #888;
  font-size: 10px;
  margin-bottom: 2px;
}
.album-price {
  color: #f56c6c;
  font-size: 10px;
}
.shop-btn {
  width: 100%;
  margin-top: 16px;
}
</style>